<template>
  <div class="contentbox designReviewContainer">
    <div v-if="designGroups&&designGroups.length != 0" class="fujianList">
      <fujian @fuzhiFunc="setItemData" :fujianList="designGroups" :subFujianList="designList"></fujian>
    </div>
    <div v-if="showBox" class="fujianAnswer">
      <design-opinions
        v-if="showBox"
        :firstLinkName="firstLinkName"
        :file="currentFile"
        :linkName="linkName"
        :subName="subName"
        :subNameIndex="subNameIndex"
        :projectId="projectId"
        :currentFileId="currentFileId"
      ></design-opinions>
    </div>
    <div v-if="designGroups.length == 0 || !designGroups" class="no-data">暂无数据</div>
    <!-- <el-aside class="designMenu" style="width: 200px;">
      <el-menu class="designTag" default-active="0-0">
          <el-submenu :index="`${index}`" v-for="(item, index) in designGroups" :key="item">
            <template slot="title">
              <span>{{item}}</span>
            </template>
            <el-menu-item v-for="(it, idx) in designList" @click="handleChangeComponent(it.fileId,item,index)" :index="`${index}-${idx}`" :key="it.fileId" v-if="it.tag === item">
              {{it.fileName | handleSuffix}}
            </el-menu-item>
          </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <design-opinions :file="currentFile" :linkName="linkName" :subName="subName" :subNameIndex="subNameIndex" :firstLinkName="firstLinkName" :projectId="projectId" ></design-opinions>
    </el-main>-->
  </div>
</template>

<script>
import designOpinions from "./designOpinions/index";
import fujian from "@/components/fujianListForThreeNotOne";
export default {
  components: {
    designOpinions,
    fujian
  },
  data() {
    return {
      currentFileId: 0,
      annexTabs: `designOpinions0`,
      subName: "",
      subNameIndex: 1,
      showBox: false,
      currentFile: null
    };
  },
  props: {
    designList: {
      type: Array,
      require: true,
      default: () => []
    },
    projectId: {
      type: Number,
      require: true
    },
    linkName: {
      type: String,
      require: true
    },
    firstLinkName: {
      type: String,
      require: true
    }
  },
  filters: {
    handleSuffix(fileName) {
      if (!fileName) return "";
      return fileName.indexOf(".") !== -1 ? fileName.split(".")[0] : fileName;
    }
  },
  mounted() {
    console.log(this.designList);
  },
  computed: {
    // // 得到当前文件
    // currentFile () {
    //     // 如果激活文件Id为0 则返回列表中第一个文件
    //     if (this.currentFileId) {
    //         const a = this.designList.find(item => {
    //             return item.fileId === this.currentFileId
    //         })
    //         return a
    //     } else {
    //         return this.designList.length ? this.designList[0]:{}
    //     }
    // },
    // 去重文件的tag属性，获得文件group选项
    designGroups() {
      let results = [];
      if (this.designList) {
        let obj = {};
        for (let j of this.designList) {
          if (j["tag"] && !obj[j["tag"]]) {
            results.push(j["tag"]);
            obj[j["tag"]] = 1;
          }
        }
      }
      this.subName = results[0];
      return results;
    }
  },
  methods: {
    setItemData(file, fid, subName, subNameIndex) {
      console.log(file,"列表点击穿进去");
      this.showBox = true;
      this.currentFile = file;
      this.currentFileId = fid;
      this.subName = subName;
      this.subNameIndex = subNameIndex;
      // if (this.currentFileId !== fid) {
      // }
    }
    // handleChangeComponent (fid,subName,subNameIndex) {
    //     this.currentFileId = fid;
    //     this.subName = subName;
    //     this.subNameIndex = subNameIndex + 1;
    // }
  }
};
</script>

<style lang="scss" scoped>
.contentbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  // -webkit-align-items: center;
  // align-items: center;
  .fujianList {
    width: 25%;
  }
  .fujianAnswer {
    width: 75%;
  }
}
</style>

